<template>
	<view>
		<cu-custom bgColor="mybg-green" isBack>
			<block slot="backText"></block>
			<block slot="content">小记者订报</block>
		</cu-custom>
		<form>
			<view class="padding bg-white margin-top flex-row justify-between" style="">
				<view class="uni-title uni-common-pl myfont-15px text-black">寄报地区</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="regions"
									v-model="news_info.region" style="padding: 0px;">
									<view class="uni-input">{{regions[index]}} <text
											class="cuIcon-unfold myfont-15px margin-left-xs"></text></view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="uni-title uni-common-pl">地址:</view>
				<input name="input" style="text-align: right;font-size: 15px;" placeholder=" XX省XX市"
					v-model="news_info.province_city" :disabled="isDisabled"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址:</view>
				<input name="input" style="text-align: right;" placeholder="XX区XX街道XX小区XX楼座"
					v-model="news_info.address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">邮编:</view>
				<input name="input" type="number" style="text-align: right;" v-model="news_info.postcode"></input>
			</view>
			<view>
				<view class="cu-form-group myborder">
					<view class="title">收货人:</view>
					<input name="input" style="text-align: right;" v-model="news_info.receiver"></input>
				</view>
			</view>
			<view class="cu-form-group myborder">
				<view class="title">手机号码:</view>
				<input name="input" type="number" maxlength="13" style="text-align: right;"
					v-model="news_info.phone"></input>
			</view>
			<view class="cu-form-group margin-top" v-if="index3==1">
				<view class="title">学校:</view>
				<input name="input" style="text-align: right;" v-model="news_info.school"></input>
			</view>
			<view>
				<view class="cu-form-group myborder" v-if="index3==1">
					<view class="title">班级:</view>
					<input name="input" style="text-align: right;" v-model="news_info.classes"></input>
				</view>
			</view>
			<view class="cu-form-group myborder" v-if="index3==1">
				<view class="title">学生姓名:</view>
				<input name="input" style="text-align: right;" v-model="news_info.student_name"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">订单备注:</view>
				<input name="input" style="text-align: right;" v-model="news_info.remark"></input>
			</view>
			<!-- <view class="cu-form-group" v-if="index3 == 0">
				<view class="title">选择期限</view>
				<picker mode="date" fields="month" style="text-align: right;" :start='start_date'
					:value="news_info.start_date" @change="bindDateChange" v-model="news_info.start_date">
					<view class="uni-input">{{news_info.start_date}}</view>
				</picker>
				<view class="title" style="text-align: right;">------</view>
				<picker mode="date" fields="month" style="text-align: right;" :start='start_date'
					:value="news_info.end_date" @change="bindDateChange2" v-model="news_info.end_date">
					<view class="uni-input">{{news_info.end_date}}</view>
				</picker>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view> -->
			<view class="bg-white flex-row justify-between padding myborder" v-if="index3 == 1">
				<view class="title">订报期限</view>
				<view class="flex-row justify-center">
					<view class="uni-input">{{news_info.start_date}}</view>
					<view class="padding-lr-sm"></view>
					<view class="title" style="text-align: center;">------</view>
					<view class="padding-lr-sm"></view>
					<view class="uni-input">{{news_info.end_date}}</view>
				</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">报纸数量</view>
				<input class="uni-input" controls-position="right" style="text-align: right;" type="number"
					placeholder="输入数量" v-model="news_info.amount" />份
			</view>
			<view class="cu-form-group" v-if="index3==0">
				<view class="title">收费标准</view>
				<input name="input" v-model="news_info.charge_standard">报纸一份每月{{price}}元，外地（邮寄）
				每份报纸每月加收15元邮费,最多预定{{month}}个月。</input>
			</view>
			<view class="cu-form-group" v-if="index3==1">
				<view class="title" style="padding: 0;">收费标准</view>
				<input name="input" v-model="news_info.charge_standard">报纸一份每月{{price1}}元，外地（邮寄）
				每份报纸每月加收15元邮费,每次预定至12月。</input>
			</view>
			<view class="padding bg-white margin-top flex-row justify-between">
				<view class="myfont-15px text-black">购买主体</view>
				<view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange2" :value="index2" :range="buyers"
									v-model="news_info.buyer">
									<view class="uni-input">{{buyers[index2]}}<text
											class="cuIcon-unfold myfont-15px margin-left-xs"></text></view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input name="input" v-model="news_info.security_code"></input>
				<view class="code-img-wrapper" @click="updateImageCode">
					<canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="margin-left">
					{{news_info.months}}个月 , {{news_info.amount}}份
					总额
					<uni-text data-v-4d87e8e4 class="text-price text-red">
						{{cal_total_amount()}}
					</uni-text>
				</view>
				<button class="margin-right" type="primary" @click="submit">提交订单</button>
			</view>
			<view class="cu-form-group justify-center flex-column myfont-18px">
				<text class="">主办单位：北海市融媒体中心</text>
				<text>咨询电话：0779-2030018</text>
			</view>
			<!-- <view cllass="code-img-wrapper" @click="updateImageCode">
				<canvas style="width: 220rpx;height: 86rpx;" canvas-id="canvas"></canvas>
			</view> -->
		</form>
		<view class="padding-sm"></view>
		<view class="cu-modal" :class="modalName=='userModal'?'show':''">
			<view class="cu-dialog" style="width: 300px;">
				<view class="loginView">
					<view class="loginTitle" style="">授权获取个人信息</view>
					<image src="../../static/wxProgram.png"></image>
					<view>申请获取您微信的头像、昵称！</view>
					<button class='cu-btn bg-green shadow' :disabled="loginDisable" @click="wxGetUserInfo">授权登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../utils/config.js'
	import {
		Mcaptcha
	} from '@/utils/mcaptcha'
	export default {
		data() {
			return {
				news_info: {
					region: '',
					province_city: '广西北海市',
					address: '',
					postcode: '',
					receiver: '',
					phone: '',
					remark: '',
					amount: '1',
					buyer: '',
					security_code: '',
					start_date: this.getCurrentMonth(),
					end_date: this.getCurrentMonth(),
					months: 0,
					subscription_type: '',
					school: '',
					classes: '',
					student_name: '',
				},
				check_list: config.order_check_list1,
				start_date: this.getCurrentDate(0),
				regions: ['北海市辖区', '其他地区'],
				index: 0,
				buyers: ['个人', '单位'],
				subscription: ['普通订报', '小记者订报'],
				index2: 0,
				index3: 1,
				modalName: null,
				order_info: null,
				price: 40,
				month: 12,
				price1: 40,
				month1: 3,
				isDisabled: true,
				modalName: '',
				loginDisable: false,
				userInfo: uni.getStorageSync('userInfo') || null,
				isLogin: uni.getStorageSync('isLogin') || false,
			};
		},
		methods: {
			addCompleted() {
				var _this = this;
				uni.showLoading({
					title: '正在提交订单...'
				})
				let para = Object.assign({}, _this.news_info)
				para.start_date += '-01'
				para.end_date += '-01'
				para.region = _this.regions[_this.index]
				para.buyer = _this.buyers[_this.index2]
				para.subscription_type = _this.subscription[_this.index3]
				para.amount = _this.news_info.amount
				para.months = _this.news_info.months
				para.total_fee = _this.cal_total_amount()
				para.body = `订购报纸${_this.news_info.amount}份${_this.news_info.months}个月，共${para.total_fee}元`
				_this.$http.post("/app/order", para, (res) => {
					uni.hideLoading()
					if (res.data.code == 20000) {
						_this.order_info = res.data.order
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '下单成功，即将打开支付界面！',
							complete: function(re) {
								if (re.confirm) {
									_this.create_wx_order()
								}
							}
						})
					} else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data.message,
							complete: function(re) {
								if (re.confirm) {}
							}
						})
					}
				})
			},
			// cal_total_amount() {
			// 	return this.news_info.amount * [this.news_info.months + 1] * (parseInt(this.price) + (this.regions[this
			// 			.index] === '其他地区' ?
			// 		15 : 0))
			// },
			cal_total_amount() {
				const basePrice = this.index3 == 1 ? parseInt(this.price1) : parseInt(this.price);
				const regionFee = this.regions[this.index] === '其他地区' ? 15 : 0;
				return this.news_info.amount * (this.news_info.months) * (basePrice + regionFee);
			},

			getCurrentDate: function(n) {
				var dd = new Date();
				if (n) {
					dd.setDate(dd.getDate() - n);
				}
				var year = dd.getFullYear();
				var month =
					dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				var day = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return year + "-" + month + "-" + day;
			},
			create_wx_order: function() {
				let _this = this;
				_this.$http.post('app/order/create_wx_order', {
					// 'pay_amount': _this.form.amount * 100,
					// 'pay_type': pay_type.online,
					// 'purpose': pay_purpose.temp_fee,
					// 'body': _this.plateNo + '停车费',
					'order_id': _this.order_info.id,
					// 'pay_amount': payAmount * 100,
					// 'pay_amount': 1,

				}, (res) => {
					// var dat = JSON.parse(res.data)
					let dat = res.data
					// console.log(dat)
					if (dat.code == 20000) {
						var data = dat.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								_this.order_info = ''
								uni.showToast({
									title: '支付成功！',
									duration: 1500,
									success() {}
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/orders/order_list'
									})
								}, 1750)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						console.log('error:' + res);
					}
				});
			},
			onReady() {
				this.mcaptcha = new Mcaptcha({
					el: 'canvas',
					width: 80,
					height: 35,
					createCodeImg: ""
				});
			},
			// 刷新验证码
			updateImageCode() {
				this.mcaptcha.refresh()
			},
			// 提交前校验图形验证码
			submit() {
				let content = ''
				let _this = this
				if (!_this.isLogin) {
					_this.checkToken()
					return
				}
				let check_list = JSON.parse(JSON.stringify(_this.check_list))

				check_list.some(ele => {
					let val = _this.news_info[ele.value]
					if (ele.reg && !config[ele.reg].test(val)) {
						content = ele.tips
						return true
					} else if (!val) {
						content = ele.tips
						return true
					}
				})
				let validate = this.mcaptcha.validate(this.news_info.security_code)
				if (!validate) {
					content = '图形验证码错误'
				}
				if (content) {
					uni.showToast({
						title: content,
						icon: 'none'
					})
				} else {
					this.addCompleted()
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
				if (this.index == 0) {
					this.news_info.province_city = '广西北海市'
					this.isDisabled = true
				} else {
					this.news_info.province_city = ''
					this.isDisabled = false
				}
			},
			bindPickerChange2: function(e) {
				this.index2 = e.detail.value;
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				return `${year}-${month}`;
			},
			bindDateChange: function(e) {
				const newStartDate = e.target.value;
				const newEndDate = this.news_info.end_date; // 获取当前 end_date
				const currentDate = new Date();
				const earliestDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
				const latestDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + parseInt(this.month),
					0);
				// 检查限定条件：日期在允许范围内且 start_date 必须早于 end_date
				if (this.isDateInRange(newStartDate, earliestDate, latestDate) && this.isDateValid(newStartDate,
						newEndDate)) {
					this.news_info.start_date = newStartDate;
					this.news_info.months = this.monthNumber(this.news_info.start_date, this.news_info.end_date);
				} else {
					// 显示错误提示或其他处理
					uni.showToast({
						title: '请选择正确的日期范围和顺序',
						icon: 'none',
						duration: 2000,
						mask: true
					});
				}
			},

			bindDateChange2: function(e) {
				const newEndDate = e.target.value;
				const newStartDate = this.news_info.start_date; // 获取当前 start_date
				const currentDate = new Date();
				const earliestDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
				const latestDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + parseInt(this.month),
					0);
				// 检查限定条件：日期在允许范围内且 start_date 必须早于 end_date
				if (this.isDateInRange(newEndDate, earliestDate, latestDate) && this.isDateValid(newStartDate,
						newEndDate)) {
					this.news_info.end_date = newEndDate;
					this.news_info.months = this.monthNumber(this.news_info.start_date, this.news_info.end_date);
				} else {
					// 显示错误提示或其他处理
					uni.showToast({
						title: '请选择正确的日期范围和顺序',
						icon: 'none',
						duration: 2000,
						mask: true
					});
				}
			},
			isDateInRange(date, minDate, maxDate) {
				const selectedDate = new Date(date);
				return selectedDate >= minDate && selectedDate <= maxDate;
			},
			isDateValid(startDate, endDate) {
				return new Date(startDate) <= new Date(endDate);
			},
			calculateEndDate() {
				if (this.index3 === 1) {
					const startDate = new Date(this.news_info.start_date);
					const endDate = new Date(startDate);
					endDate.setMonth(startDate.getMonth() + parseInt(this.month1));
					return formatDate(endDate); // 自定义一个方法 formatDate 来格式化日期显示
				} else {
					return this.news_info.end_date;
				}
			},
			monthNumber: function(date1_str, date2_str) {
				const date1 = new Date(date1_str);
				const date2 = new Date(date2_str);
				const month_between = (date2.getFullYear() - date1.getFullYear()) * 12 + date2.getMonth() - date1
					.getMonth() + 1
				return Math.abs(month_between);
			},
			getCurrentMonth() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			draw(showNum) {
				// 获取canvas
				var canvas = this.$refs.c1
				console.log(canvas)
				var ctx = canvas[0].getContext("2d")
				// 获取画布的宽高
				var canvas_width = canvas.width()
				var canvas_height = canvas.height()
				//  清空之前绘制的内容
				// 0,0清空的起始坐标
				// 矩形的宽高
				ctx.clearRect(0, 0, canvas_width, canvas_height)
				// 开始绘制
				var scode =
					"a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
				var arrCode = scode.split(",")
				var arrLength = arrCode.length
				for (var i = 0; i < 4; i++) {
					var index = Math.floor(Math.random() * arrCode.length)
					var txt = arrCode[index] //随机一个字符
					showNum[i] = txt.toLowerCase() //转化为小写存入验证码数组
					// 开始控制字符的绘制位置
					var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
					var y = 20 + Math.random() * 8 // 起始点y坐标

					ctx.font = "bold 20px 微软雅黑"
					// 开始旋转字符
					var deg = Math.random * -0.5
					// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
					ctx.translate(x, y)
					ctx.rotate(deg)
					// 设置绘制的随机颜色
					ctx.fillStyle = randomColor()
					ctx.fillText(txt, 0, 0)

					// 把canvas复原
					ctx.rotate(-deg)
					ctx.translate(-x, -y)

				}
				for (var i = 0; i < 30; i++) {
					if (i < 5) {
						// 绘制线
						ctx.strokeStyle = randomColor()
						ctx.beginPath()
						ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
						ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
						ctx.stroke()
					}
					// 绘制点
					ctx.strokeStyle = randomColor()
					ctx.beginPath()
					var x = Math.random() * canvas_width
					var y = Math.random() * canvas_height
					ctx.moveTo(x, y)
					ctx.lineTo(x + 1, y + 1)
					ctx.stroke()

				}

			},
			get_dict() {
				let _this = this;
				let para = Object.assign({}, _this.para_lsit)
				_this.$http.get('/app/dict', {}, (res) => {
					if (res.data.code == 20000) {
						const dictItems = res.data.items;

						for (const item of dictItems) {
							if (item.name === "可订月份") {
								_this.month = item.content;
							}
							if (item.name === "每月金额") {
								_this.price = item.content;
							}
							// else if (item.name === "小记者可订月份") {
							// 	_this.month1 = item.content;
							// } 
							if (item.name === "小记者每月金额") {
								_this.price1 = item.content;
							}
						}
						console.log(_this.price, _this.month, _this.price1, _this.month1)

					} else {}
				});
			},
			closeModal() {
				this.modalName = ''
			},
			openDialogs: function() {
				// this.$refs.popup.open()
				this.modalName = 'userModal'
			},
			// 获取个人信息
			getInfo() {
				var _this = this;
				var para = {}
				_this.$http.get('app/app_user', {
					data: para
				}, (res) => {
					if (res.data.code == 20000) {
						let info = res.data.info
						uni.setStorageSync('userInfo', info);
						_this.userInfo = info
					} else if (res.data.code == 40001 || res.statusCode == 401) {
						_this.removeToken()
						// _this.openDialogs()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			},
			wxGetUserInfo() {
				var _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						//如果用户点击了确定按钮
						if (res.confirm) {
							uni.showLoading({
								title: '正在获取授权...'
							})
							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								lang: 'zh_CN',
								success: res => {
									_this.userInfo = res.userInfo;
									_this.login();
									uni.setStorageSync('userInfo', _this.userInfo);
								},
								fail: res => {
									//拒绝授权
									wx.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				})

			},
			login() {
				let _this = this;
				// 1.wx获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
						_this.getUserToken(code);
					},
				});
			},
			getUserToken(code) {
				let _this = this;
				console.log('开始向服务器获取登录信息！');
				uni.showLoading({
					title: '登录中!'
				})
				_this.loginDisable = true
				_this.$http.get('app/app_user/login', {
					data: {
						code: code,
					}
				}, (res) => {
					uni.hideLoading()
					_this.loginDisable = false
					if (res.data.code == 20000) {
						//说明是没获取到授权 , 需要获取用户信息上次
						if (res.data.nick_name) {
							_this.firstLogin = false;
							uni.setStorageSync('firstLogin', false);
						}
						_this.isLogin = true;
						uni.setStorageSync('userId', res.data.user_id);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('isLogin', true)
						_this.uploadUserInfo();
						_this.$refs.popup.close() //隐藏弹窗
					} else {
						_this.removeToken()
						uni.showToast({
							title: res.data.msg,
							icon: 'fail'
						})
					}
				});
			},
			//将userInfo传给后台
			uploadUserInfo() {
				let _this = this;
				_this.$http.post('app/app_user/upload_info', {
					user_info: _this.userInfo,
				}, (res) => {
					if (res.data.code == 20000) {
						//说明是没获取到授权 , 需要获取用户信息上次
						_this.closeModal()
						console.log("上传用户信息成功!");
						_this.get_dict()
					} else {
						console.log("上传用户信息失败!");
						uni.showToast({
							title: '出错了，请重新授权！',
							icon: 'none',
							complete() {
								setTimeout(() => {
									_this.openDialogs()
								}, 1 * 1000)
							}
						})
					}
				});
			},
			removeToken() {
				this.userInfo = null
				this.isLogin = false
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('token')
				uni.removeStorageSync('isLogin')
			},
			checkToken() {
				let _this = this;
				if (!_this.isLogin) {
					_this.openDialogs()
					return
				} else {
					_this.getInfo()
				}
				uni.checkSession({
					fail() {
						_this.openDialogs()
						return
					}
				})
			},


		},
		onShareAppMessage(el) {
			return {
				title: '北海日报社在线订报',
				path: '/pages/orders/order_form'
			}
		},
		onLoad(option) {
			let _this = this;
			_this.get_dict()

			const currentDate = new Date();
			const currentMonth = currentDate.getMonth() + 1; // 获取当前月份（注意月份是从0开始计数的）

			if (currentMonth >= 1 && currentMonth <= 10) {
				// 当前时间在1月到10月之间
				const nextMonth = currentMonth + 1;
				_this.news_info.start_date = _this.formatDate(new Date(currentDate.getFullYear(), nextMonth - 1, 1));
				_this.news_info.end_date = _this.formatDate(new Date(currentDate.getFullYear(), 11, 1));
			} else if (currentMonth === 11 || currentMonth === 12) {
				// 当前时间在11月或12月
				const nextYear = currentDate.getFullYear() + 1;
				_this.news_info.start_date = _this.formatDate(new Date(nextYear, 0, 1));
				_this.news_info.end_date = _this.formatDate(new Date(nextYear, 11, 1));
			}
			// const endDate = new Date(this.start_date);
			// endDate.setMonth(endDate.getMonth() + parseInt(this.month1) - 1);
			// this.news_info.end_date = this.formatDate(endDate); // 格式化日期并赋值给 end_date
			this.news_info.months = this.monthNumber(this.news_info.start_date, this.news_info.end_date);
		}

	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.myborder {
		border-top: 1rpx solid #eee;
	}

	.loginView {
		text-align: center;
		width: 300px;
		border-radius: 8px;
		background-color: white;
	}

	.loginView image {
		margin: 8px;
		width: 50px;
		height: 50px;
	}


	.loginView button {
		width: 250px;
		height: 45px;
		margin: 10px;
		border-radius: 20px;
	}

	.loginView .loginTitle {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid lightgrey;
	}
</style>